<template>
    <div class="content">
        <el-container class="warp" direction="vertical">
            <el-container>
                <el-aside class="aside" ref="aside" id="aside" width="180px" style="position: relative;">
                    <!-- Aside content -->
                    <div>
                        <div
                            style="font-weight: bold;color: rgb(51, 51, 51);padding: 15px 0px 10px 15px;border-right: solid 1px #e6e6e6;">
                            分类
                        </div>
                        <div class="category-list">
                            <el-menu default-active="" class="el-menu-vertical-demo" @select="selectMenu">
                                <el-menu-item index="" key="">
                                    <span slot="title">&emsp;全部</span>
                                </el-menu-item>

                                <el-menu-item v-for="(cate) in categoryList" :index="cate.id + ''" :key="cate.id">
                                    <!-- <i class="el-icon-setting"></i> -->
                                    <span slot="title">&emsp;{{ cate.name }}</span>
                                </el-menu-item>

                            </el-menu>
                        </div>
                    </div>
                </el-aside>


                <el-main class="list-container" style="position: relative;">
                    <!-- Main content -->
                    <div class="list">
                        <el-empty v-if="communityList.length ==0" description="暂无数据"></el-empty>
                        <community-card v-for="community in communityList" :community="community" :key="community.id"
                            style="margin-bottom: 40px;">

                        </community-card>
                        <!-- <community-card v-for="index in params.pageSize" :community="index" :key="index" style="margin-bottom: 30px;">
                        </community-card> -->
                    </div>
                    <div class="pagination-warp">
                        <el-pagination @current-change="getCommunity" :current-page.sync="params.pageNum"
                            :page-sizes="[20, 40, 80, 100]" :page-size.sync="params.pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="total" background>
                            :pager-count="7">
                        </el-pagination>
                    </div>
                </el-main>
            </el-container>


        </el-container>
    </div>
</template>

<script>
import * as CategoryAPI from '@/api/category/category'
import * as CommunityAPI from '@/api/community/community'
import CommunityCard from '@/components/CommunityCard'
export default {
    data() {
        return {
            categoryList: [],
            communityList: [],
            
            params: {
                pageNum: 1,
                pageSize: 20,
                categoryId: undefined
            },
            total: 0
        }
    },
    components: {
        CommunityCard,
    },
    methods: {
        async getCategory() {
            let res = await CategoryAPI.getCategoryList();
            console.log(res);
            this.categoryList = res.data;
        },
        async getCommunity() {
            let res = await CommunityAPI.getCommunityList(this.params);
            console.log(res);
            this.communityList = res.data.rows;
            this.total = res.data.count;
        },
        selectMenu(index, indexPath) {
            this.params.categoryId = index;
            this.getCommunity();
        }
    },
    mounted() {
        this.params.categoryId = this.$route.query.categoryId
        this.getCategory();
        this.getCommunity();
    },
}
</script>

<style lang="scss" scoped>
.aside {
    margin-top: 20px;
    background-color: white;
}

.content {
    width: 1146px;
    margin: auto;
    position: relative;
}

.list-container {
    flex: 1;
    box-sizing: border-box;
    padding: 0!important;
    margin: 20px 40px 0px 40px;
    min-height: calc(100vh - 91px);
    background-color: white;
    display: flex;
    flex-direction: column;


    /* background-color: aqua; */
}

.list {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
    padding: 40px 40px 0px 40px;
    box-sizing: border-box;
}

.fixed {
    position: fixed;
    top: 71px;
}

.category-list .el-menu-item {
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    overflow: hidden;

}

.pagination-warp {

    padding: 15px;
}
</style>